<template>
  <div class="image-preview-wrapper">
    <vue-easy-lightbox
      :visible="visible"
      :imgs="imgs"
      :index="index"
      :scrollDisabled="true"
      :moveDisabled="false"
      :teleport="teleportTo"
      @hide="onHide"
    >
      <template #toolbar="{ toolbarMethods }">
        <div class="toolbar-custom">
          <button class="toolbar-btn" @click="toolbarMethods.zoomIn">
            <ZoomIn :size="20" />
          </button>
          <button class="toolbar-btn" @click="toolbarMethods.zoomOut">
            <ZoomOut :size="20" />
          </button>
          <button class="toolbar-btn" @click="toolbarMethods.rotate">
            <RotateCw :size="20" />
          </button>
          <button class="toolbar-btn" @click="onDownload">
            <Download :size="20" />
          </button>
          <button class="toolbar-btn close-btn" @click="onHide">
            <X :size="20" />
          </button>
        </div>
      </template>
    </vue-easy-lightbox>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import VueEasyLightbox from 'vue-easy-lightbox'
import { ZoomIn, ZoomOut, RotateCw, Download, X } from 'lucide-vue-next'

interface ImageItem {
  src: string
  title?: string
  alt?: string
}

interface Props {
  images: string[] | ImageItem[]
  visible?: boolean
  startIndex?: number
  teleportTo?: string | HTMLElement
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  startIndex: 0,
  teleportTo: 'body'
})

const emit = defineEmits(['hide', 'download'])

// 内部状态
const visible = ref(props.visible)
const index = ref(props.startIndex)

// 处理图片数据格式
const imgs = computed(() => {
  if (props.images.length === 0) return []

  // 检查是否已经是对象格式
  if (typeof props.images[0] === 'object') {
    return props.images
  }

  // 将字符串数组转换为对象数组
  return (props.images as string[]).map((src) => ({ src }))
})

// 监听props变化
watch(
  () => props.visible,
  (newVal) => {
    visible.value = newVal
  }
)

watch(
  () => props.startIndex,
  (newVal) => {
    index.value = newVal
  }
)

// 关闭预览
const onHide = () => {
  visible.value = false
  emit('hide')
}

// 下载当前图片
const onDownload = () => {
  if (imgs.value.length === 0 || index.value >= imgs.value.length) return

  const currentImg = imgs.value[index.value]
  emit('download', currentImg)

  // 如果没有监听download事件，则直接下载
  if (emit.length === 0) {
    const link = document.createElement('a')
    link.href = (currentImg as ImageItem).src
    link.download = (currentImg as ImageItem).title || 'image'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

// 暴露方法给父组件
defineExpose({
  show: (idx = 0) => {
    index.value = idx
    visible.value = true
  },
  hide: onHide,
  setIndex: (idx: number) => {
    index.value = idx
  }
})
</script>

<style scoped>

/* 修改vue-easy-lightbox的默认样式 */
:deep(.vel-toolbar) {
  top: auto !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

:deep(.toolbar-custom) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

:deep(.toolbar-btn) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

:deep(.toolbar-btn:hover) {
  background-color: rgba(255, 255, 255, 0.3);
}

:deep(.close-btn) {
  background-color: rgba(255, 0, 0, 0.5);
}

:deep(.close-btn:hover) {
  background-color: rgba(255, 0, 0, 0.7);
}

/* 隐藏原始的关闭按钮 */
:deep(.vel-icon-close) {
  display: none !important;
}
</style>
